<template>
    <div class="scroll">
        <div ref="wrapper" class="better-scroll">
            <slot name="scroll"></slot>
        </div>
        <slot></slot>
    </div>
</template>

<script>
    import BScroll from 'better-scroll';
    export default {
        props: {
            data: {
                type: Array,
                default: null
            },
            probeType: {
                type: Number,
                default: 1
            },
            listenScroll: {
                type: Boolean,
                default: false
            }
        },
        mounted() {
            setTimeout(this._initScroll,20)
        },
        methods: {
            _initScroll() {
                if (!this.$refs.wrapper) return;
                this.scroll = new BScroll(this.$refs.wrapper, {
                    probeType: this.probeType,
                    scrollY: true, // 滚动方向为Y轴
                    click: true, // 是否派发click事件，通常判断浏览器派发的click还是betterscroll派发的click，可以用event._constructed，若是bs派发的则为true
                    momentum: true, // 当快速滑动时是否开启滑动惯性
                    bounce: false, // 是否启用回弹动画效果
                    bounceTime: 700, // 弹力动画持续的毫秒数
                    deceleration: 0.001, // 滚动动量减速越大越快，建议不大于0.01
                    momentumLimitTime: 300, // 符合惯性拖动的最大时间
                    momentumLimitDistance: 15, // 符合惯性拖动的最小拖动距离
                    resizePolling: 60, // 重新调整窗口大小时，重新计算better-scroll的时间间隔
                })
                // 监听scroll事件
                if(this.listenScroll){
                    // 滚动开始时触发
                    this.scroll.on('scrollStart',() => {
                        this.$emit('scrollStore',true)
                    })
                    // pos 位置参数
                    this.scroll.on('scroll',(pos) => {
                        this.$emit('distance', Math.abs(pos.y));
                        this.$emit('scrollStore', true);
                    })
                    // 滚动结束
                    this.scroll.on('scrollEnd',() => {
                        this.$emit('scrollStore',false);
                    })
                }
            },
            // scroll 可用
            enable(){
                this.scroll && this.scroll.enable();
            },
            // scroll 不可用
            disable(){
                this.scroll && this.scroll.disable();
            },
            // 滚向位置
            scrollTo(){
                this.scroll && this.scroll.scrollTo.apply(this.scroll,arguments);
            },
            // 滚向元素
            scrollToElement(){
                this.scroll && this.scroll.scrollToElement.apply(this.scroll,arguments);
            },
            // 刷新
            refresh() {
                this.scroll && this.scroll.refresh();
            },
        },
        watch:{
            data (val) {
                setTimeout(this.refresh,20)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .scroll{
        position: absolute;
        top:50px;
        bottom:0;
        width:100%;
        overflow: hidden;
        .better-scroll{
            width:100%;
            height:100%;
            overflow: hidden;
        }
    }
</style>
